<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>测试结果</title>
  <link rel="stylesheet" href="../plugins/elementui/index.css">
</head>
<body>
<div id="app">
  <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <el-menu-item index="home">首页</el-menu-item>
    <el-menu-item index="test">单词测试</el-menu-item>
    <el-menu-item index="error">错词记录</el-menu-item>
  </el-menu>


  <!-- 显示测试结果的表格 -->
  <h3>测试结果</h3>
  <el-table :data="testResults" style="width: 100%">
    <!-- 序号列 -->
    <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>

    <!-- 单词列 -->
    <el-table-column label="单词" prop="word" align="center"></el-table-column>

    <!-- 美式音标列，带点击播放功能 -->
    <el-table-column label="美式音标" align="center">
      <template slot-scope="scope">
                    <span @click="playAudio(scope.row.usVoice)" style="cursor: pointer; color: #409EFF;">
                        {{ scope.row.usPhonetic }}
                    </span>
      </template>
    </el-table-column>

    <!-- 英式音标列，带点击播放功能 -->
    <el-table-column label="英式音标" align="center">
      <template slot-scope="scope">
                    <span @click="playAudio(scope.row.ukVoice)" style="cursor: pointer; color: #409EFF;">
                        {{ scope.row.ukPhonetic }}
                    </span>
      </template>
    </el-table-column>

    <!-- 单词意思列 -->
    <el-table-column label="单词意思" prop="wangLuMeaning" align="center"></el-table-column>

    <!-- 用户答案列 -->
    <el-table-column label="你的答案" prop="userAnswer.userAnswer" align="center"></el-table-column>

    <!--<el-table-column label="你的答案" prop="userAnswer">-->
    <!--  <template slot-scope="scope">-->
    <!--    {{ scope.row.userAnswer && scope.row.userAnswer.userAnswer || '' }}-->
    <!--  </template>-->
    <!--</el-table-column>-->


    <!-- 结果列 -->
    <el-table-column label="结果" align="center">
      <template slot-scope="scope">
        <span v-if="scope.row.isCorrect">正确</span>
        <span v-else>错误</span>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 引入 Vue 和 ElementUI -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      testResults: []
    },
    created() {
      // 从 sessionStorage 中读取数据
      const results = sessionStorage.getItem('testResults');
      if (results) {
        this.testResults = JSON.parse(results);
      } else {
        console.error("测试结果数据不存在");
      }
    },
    methods: {
      handleSelect(key) {
        this.currentPage = key;
        if (key === 'test') {
          this.goToTestPage();
        }
        if (key == 'error'){
          this.goToErrorWordPage();
        }
        if (key == 'home'){
          this.goToHomePage();
        }
      },
      goToTestPage() {
        window.location.href = 'select-chapter.html';
      },
      goToErrorWordPage(){
        window.location.href = 'error-words.html';
      },
      goToHomePage(){
        window.location.href = '../index.html';
      },
      playAudio(audioUrl) {
        if (audioUrl) {
          const audio = new Audio(audioUrl);
          audio.play().catch(error => {
            console.error("音频播放失败: ", error);
          });
        } else {
          this.$message.warning("没有找到音频文件");
        }
      }
    }
  });
</script>
</body>
</html>